<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
 <head>
  <title>Automatic table sizing algorithm investigation (fixed sizes)</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-fixed-sizes.html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
  <style type="text/css">
   html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
   body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
   body * { border: solid 3px black; }
   table { width: 600px; margin: 1em 0; }
   td { height: 1em; }
   .f40 { width: 40px; }
   .f50 { width: 50px; }
   .f60 { width: 60px; }
   .f100 { width: 100px; }
   .f200 { width: 200px; }
   .f400 { width: 400px; }
   .f600 { width: 600px; }
   span { border: solid purple; height: 1em; display: block; }
  </style>
 </head>
 <body>

  <p>Blank rows have the same dimensions as the preceeding row, but
  with zero width spaces in the cells instead of text. Purple boxes
  are fixed sized contents.</p>

  <p>first cell</p>

  <table>
   <tr>
    <td class="f50"> 50px </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f40">40px</span> </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f60">60px</span> </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f100">100px</span> </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f400">400px</span> </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f600">600px</span> </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>

  <p>second cell</p>

  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> 50px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> <span class="f40">40px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> <span class="f60">60px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> <span class="f100">100px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> <span class="f400">400px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f50"> <span class="f600">600px</span> </td>
   </tr>
  </table>

  <p>both cells</p>

  <table>
   <tr>
    <td class="f50"> 50px </td>
    <td class="f50"> 50px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f40">40px</span> </td>
    <td class="f50"> <span class="f40">40px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f60">60px</span> </td>
    <td class="f50"> <span class="f60">60px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f100">100px</span> </td>
    <td class="f50"> <span class="f100">100px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f400">400px</span> </td>
    <td class="f50"> <span class="f400">400px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f50"> <span class="f600">600px</span> </td>
    <td class="f50"> <span class="f600">600px</span> </td>
   </tr>
  </table>

  <p>both cells too large</p>

  <table>
   <tr>
    <td class="f400"> 400px </td>
    <td class="f400"> 400px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f40">40px</span> </td>
    <td class="f400"> <span class="f40">40px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f60">60px</span> </td>
    <td class="f400"> <span class="f60">60px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f100">100px</span> </td>
    <td class="f400"> <span class="f100">100px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f400">400px</span> </td>
    <td class="f400"> <span class="f400">400px</span> </td>
   </tr>
  </table>

  <p>first cell wider</p>

  <table>
   <tr>
    <td class="f400"> 400px </td>
    <td class="f200"> 200px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f40">40px</span> </td>
    <td class="f200"> <span class="f40">40px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f60">60px</span> </td>
    <td class="f200"> <span class="f60">60px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f100">100px</span> </td>
    <td class="f200"> <span class="f100">100px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f200">200px</span> </td>
    <td class="f200"> <span class="f200">200px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f400"> <span class="f400">400px</span> </td>
    <td class="f200"> <span class="f400">400px</span> </td>
   </tr>
  </table>

  <p>second cell wider</p>

  <table>
   <tr>
    <td class="f200"> 200px </td>
    <td class="f400"> 400px </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> <span class="f40">40px</span> </td>
    <td class="f400"> <span class="f40">40px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> <span class="f60">60px</span> </td>
    <td class="f400"> <span class="f60">60px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> <span class="f100">100px</span> </td>
    <td class="f400"> <span class="f100">100px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> <span class="f200">200px</span> </td>
    <td class="f400"> <span class="f200">200px</span> </td>
   </tr>
  </table>
  <table>
   <tr>
    <td class="f200"> <span class="f400">400px</span> </td>
    <td class="f400"> <span class="f400">400px</span> </td>
   </tr>
  </table>

 </body>
</html>
